Skip to main content

Magnifying tools

Use magnifying tools to create zoom-in and zoom-out interactions directly on the chart.

This feature is implemented using the MagnifyingToolTimeRange and MagnifyingToolRectangle drawings under the hood.

To enable it, use the following configuration and creation function:

export interface NewMagnifyingwDrawingConfig {
    id?: string;
    type: 'magnifying_tool_rectangle' | 'magnifying_tool_time_range' | 'magnifying_tool_time_range_wheel';
    properties: MagnifyingToolTimeRangeProperties | MagnifyingToolRectangleProperties;
}
export const createNewMagnifyingwDrawing = (chart: ChartWithDrawings, localization: typeof drawingsDictionary) => {
    // config for a new magnifying drawing
    const magnifyingToolDrawing: NewMagnifyingwDrawingConfig = {
        id: '1',
        type: 'magnifying_tool_rectangle' || 'magnifying_tool_time_range' || 'magnifying_tool_time_range_wheel',
        properties: {
            background: {
                fillStyle: 'rgba(250,102,255,1)',
            },
            projection: {
                lineColor: 'rgba(250,102,255,1)',
                lineWidth: 1,
                lineDash: [6, 6],
            },
            text: {
                textBg: 'rgba(51,51,51,1)',
                textSize: '11px',
                backgroundOffsetWidth: 6,
                backgroundOffsetHeight: 3,
            },
            line: {
                lineColor: 'rgba(250,102,255,1)',
                lineWidth: 1,
                lineDash: [],
            },
        },
    };
    // starts the magnifying drawing
    chart.drawings.startDrawing(magnifyingToolDrawing);
    // then select with that drawing desired area on the chart and voila, the chart will make a zoom-in
}

Zoom out​

Zooming out is not available by default but can be implemented using the scaling feature API.

Example​